<h2>Default panels</h2>
<div class="row">

  <div class="col-md-12 col-lg-4">
    <div ba-panel ba-panel-class="xsmall-panel light-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac mi erat. Phasellus placerat, elit a laoreet
      semper, enim ipsum ultricies orci, ac tincidunt tellus massa eu est. Nam non porta purus, sed facilisis justo. Nam
      pulvinar sagittis quam.
    </div>
  </div>
  <div class="col-md-12 col-lg-4">
    <div ba-panel ba-panel-title="Panel with header" ba-panel-class="xsmall-panel light-text">
      Phasellus maximus venenatis augue, et vestibulum neque aliquam ut. Morbi mattis libero vitae vulputate dignissim.
      Praesent placerat, sem non dapibus cursus, lacus nisi blandit quam, vitae porttitor lectus lacus non turpis. Donec
      suscipit consequat tellus.
    </div>
  </div>
  <div class="col-md-12 col-lg-4">
    <div ba-panel ba-panel-title="Panel with header & scroll" ba-panel-class="xsmall-panel with-scroll light-text">
      <p>
        Suspendisse nec tellus urna. Sed id est metus. Nullam sit amet dolor nec ipsum dictum suscipit. Mauris sed nisi
        mauris. Nulla iaculis nisl ut velit ornare imperdiet. Suspendisse potenti. In tempor leo sed sem malesuada
        pellentesque. Maecenas faucibus metus lacus, ac egestas diam vulputate vitae.
      </p>


      <p>
        Sed dapibus, purus vel hendrerit consectetur, lectus orci gravida massa, sed bibendum dui mauris et eros. Nulla
        dolor massa, posuere et dictum sit amet, dignissim quis odio. Fusce mollis finibus dignissim. Integer sodales
        augue erat. Pellentesque laoreet vestibulum urna at iaculis. Nulla libero augue, euismod at diam eget, aliquam
        condimentum ligula. Donec a leo eu est molestie lacinia hendrerit sed lorem. Duis id diam eu metus sodales
        consequat vel eu elit. Praesent dolor nibh, convallis eleifend feugiat a, finibus porttitor nibh. Ut non libero
        vel velit pulvinar scelerisque non vel lorem. Integer porta tempor nulla. Sed nibh erat, ultrices vel lorem eu,
        rutrum vehicula sem.
      </p>

      <p>
        Donec nec tellus urna. Sed id est metus. Nullam sit amet dolor nec ipsum dictum suscipit. Mauris sed nisi
        mauris. Nulla iaculis nisl ut velit ornare imperdiet. Suspendisse potenti. In tempor leo sed sem malesuada
        pellentesque. Maecenas faucibus metus lacus, ac egestas diam vulputate vitae.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum nec ligula egestas rhoncus. Sed
        dignissim, augue vel scelerisque vulputate, nisi ante posuere lorem, quis iaculis eros dolor eu nisl. Etiam
        sagittis, ipsum ac tempor iaculis, justo neque mattis ante, ac maximus sapien risus eu sapien. Morbi erat urna,
        varius et lectus vel, porta dictum orci. Duis bibendum euismod elit, et lobortis purus venenatis in. Mauris eget
        lacus enim. Cras quis sem et magna fringilla convallis. Proin hendrerit nulla vel gravida mollis. Interdum et
        malesuada fames ac ante ipsum primis in faucibus. Vestibulum consectetur quis purus vel aliquam.
      </p>

    </div>
  </div>
</div>


<h2>Bootstrap panels</h2>
<div class="row">

  <div class="col-md-12 col-lg-4">
    <div class="panel panel-default bootstrap-panel xsmall-panel">
      <div class="panel-body">
        <p>A panel in bootstrap is a bordered box with some padding around its content.</p>

        <p class="p-with-code">Panels are created with the <code>.panel</code> class, and content inside the panel has a
          <code>.panel-body</code> class. The <code>.panel-default .panel-primary .panel-danger</code> and other classes
          are used to style the color of the
          panel. See the next example on this page for more contextual classes.</p>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-4">
    <div class="panel panel-default bootstrap-panel xsmall-panel">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        <p class="p-with-code">The <code>.panel-heading</code> class adds a heading to the panel.Easily add a heading
          container to your
          panel with .panel-heading. You may also include any
          <code>h1-h6</code> with a <code>.panel-title</code> class to add a pre-styled heading.
        </p>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-4">
    <div class="panel panel-default bootstrap-panel">
      <div class="panel-body footer-panel">
        <p class="p-with-code">
          Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers do not inherit colors
          and
          borders when
          using contextual variations as they are not meant to be in the foreground.
        </p>
      </div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

<h2>Panels with Contextual Classes</h2>
<div class="row">
  <div class="col-md-6 col-lg-4">
    <div class="panel panel-default contextual-example-panel bootstrap-panel">
      <div class="panel-heading">Panel with panel-default class</div>
      <div class="panel-body">To color the panel, use contextual classes. This is sample <code>.panel-default</code>
        panel
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="panel panel-primary contextual-example-panel bootstrap-panel">
      <div class="panel-heading">Panel with panel-primary class</div>
      <div class="panel-body">Sample <code>.panel-primary</code> panel</div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="panel panel-success contextual-example-panel bootstrap-panel">
      <div class="panel-heading">Panel with panel-success class</div>
      <div class="panel-body">Sample <code>.panel-success</code> panel</div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="panel panel-info contextual-example-panel bootstrap-panel">
      <div class="panel-heading">Panel with panel-info class</div>
      <div class="panel-body">Sample <code>.panel-info</code> panel</div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="panel panel-warning contextual-example-panel bootstrap-panel">
      <div class="panel-heading">Panel with panel-warning class</div>
      <div class="panel-body">Sample <code>.panel-warning</code> panel</div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="panel panel-danger contextual-example-panel bootstrap-panel">
      <div class="panel-heading">Panel with panel-danger class</div>
      <div class="panel-body">Sample <code>.panel-danger</code> panel</div>
    </div>
  </div>

</div>

<div class="row">
  <div class="col-md-12">
    <h2>Panel Group</h2>

    <div class="panel-group">
      <div class="panel panel-default bootstrap-panel">
        <div class="panel-heading">Panel group 1</div>
        <div class="panel-body">
          <p>To group many panels together, wrap a <code>&lt;div&gt;</code> with class <code>
            .panel-group</code> around them.</p>
        </div>
      </div>
      <div class="panel panel-default bootstrap-panel">
        <div class="panel-heading">Panel group 2</div>
        <div class="panel-body">
          <p>The <code>.panel-group</code> class clears the bottom-margin of each panel.</p>
        </div>
      </div>
    </div>
  </div>
</div>

